<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>我的收藏</title>
    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />-->
    <link rel="stylesheet" href="../styles/jquery-mobile.css">
    <!--<link rel="stylesheet" href="../styles/checkbox3.min.css">-->
    <link rel="stylesheet" href="../librarys/font-awesome-4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../styles/css-mb.css">
</head>
<body>

<!--内容-->
<div class="collect-container">
    <div class="shop-cart-container-container">
        <div id="container">
            <div data-role="page" class="collect-list">
                <div class="shop-cart-title">我的收藏（10）</div>
                <div class="index-line"></div>
                <div class="collect-container">
                    <div class="collect-container-shop">
                        <a data-ajax="false" target="_top" href="shop-mb.html" class="shop-cart-container-shop-title"><em>PIXELFILM婚礼摄影工作室<i class="fa fa-angle-right fa-lg"></i></em></a>
                    </div>
                    <div data-role="content" class="collect-container-shop-content">
                        <div class="collect-container-list">
                            <ul data-role="listview" class="swipe-delete collect-container-list-ul">
                                <li class="collect-container-list-li">
                                    <div class="behind">
                                        <a href="#" class="ui-btn delete-btn">删除</a>
                                    </div>
                                    <div class="collect-container-list-container">
                                        <div class="shop-cart-container-list-left">
                                            <a href="detail-mb.html" data-ajax="false" class="shop-cart-container-shop-title1"><img src="../images/detail(mb)-banner.jpg"></a>
                                        </div>
                                        <div class="shop-cart-container-list-right">
                                            <div class="shop-cart-container-list-title">
                                                <p>婚礼摄影跟拍单机位</p>
                                                <p>类型：单机位</p>
                                                <p><i>¥3999.00</i><del>¥4300</del><em>×1</em></p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="collect-container-list-li">
                                    <div class="behind">
                                        <a href="#" class="ui-btn delete-btn">删除</a>
                                    </div>
                                    <div class="collect-container-list-container">
                                        <div class="shop-cart-container-list-left">
                                            <a href="detail-mb.html" data-ajax="false" class="shop-cart-container-shop-title1"><img src="../images/detail(mb)-banner.jpg"></a>
                                        </div>
                                        <div class="shop-cart-container-list-right">
                                            <div class="shop-cart-container-list-title">
                                                <p>婚礼摄影跟拍单机位</p>
                                                <p>类型：单机位</p>
                                                <p><i>¥3999.00</i><del>¥4300</del><em>×1</em></p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="index-line"></div>
                        </div>

                    </div>
                </div>
                <div class="collect-container">
                    <div class="collect-container-shop">
                        <a data-ajax="false" target="_top" href="shop-mb.html" class="shop-cart-container-shop-title"><em>PIXELFILM婚礼摄影工作室<i class="fa fa-angle-right fa-lg"></i></em></a>
                    </div>
                    <div data-role="content" class="collect-container-shop-content">
                        <div class="collect-container-list">
                            <ul data-role="listview" class="swipe-delete collect-container-list-ul">
                                <li class="collect-container-list-li">
                                    <div class="behind">
                                        <a href="#" class="ui-btn delete-btn">删除</a>
                                    </div>
                                    <div class="collect-container-list-container">
                                        <div class="shop-cart-container-list-left">
                                            <a href="detail-mb.html" data-ajax="false" class="shop-cart-container-shop-title1"><img src="../images/detail(mb)-banner.jpg"></a>
                                        </div>
                                        <div class="shop-cart-container-list-right">
                                            <div class="shop-cart-container-list-title">
                                                <p>婚礼摄影跟拍单机位</p>
                                                <p>类型：单机位</p>
                                                <p><i>¥3999.00</i><del>¥4300</del><em>×1</em></p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="collect-container-list-li">
                                    <div class="behind">
                                        <a href="#" class="ui-btn delete-btn">删除</a>
                                    </div>
                                    <div class="collect-container-list-container">
                                        <div class="shop-cart-container-list-left">
                                            <a href="detail-mb.html" data-ajax="false" class="shop-cart-container-shop-title1"><img src="../images/detail(mb)-banner.jpg"></a>
                                        </div>
                                        <div class="shop-cart-container-list-right">
                                            <div class="shop-cart-container-list-title">
                                                <p>婚礼摄影跟拍单机位</p>
                                                <p>类型：单机位</p>
                                                <p><i>¥3999.00</i><del>¥4300</del><em>×1</em></p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="../librarys/jquery/jquery-2.2.3.min.js"></script>
<script src="../scripts/jquery.mobile-1.4.3.min.js"></script>
<script>
    $(function() {

        function prevent_default(e) {
            e.preventDefault();
        }

        function disable_scroll() {
            $(document).on('touchmove', prevent_default);
        }

        function enable_scroll() {
            $(document).unbind('touchmove', prevent_default)
        }

        var x;
        $('.swipe-delete li .collect-container-list-container')
                .on('touchstart', function(e) {
                    console.log(e.originalEvent.pageX);
                    $('.swipe-delete li .collect-container-list-container').css('left', '0px'); // close em all
                    $(e.currentTarget).addClass('open');
                    x = e.originalEvent.targetTouches[0].pageX; // anchor point
                })
                .on('touchmove', function(e) {
                    var change = e.originalEvent.targetTouches[0].pageX - x;
                    change = Math.min(Math.max(-60, change), 0); // restrict to -100px left, 0px right
                    e.currentTarget.style.left = change + 'px';
                    if (change < -10) disable_scroll(); // disable scroll once we hit 10px horizontal slide
                })
                .on('touchend', function(e) {
                    var left = parseInt(e.currentTarget.style.left);
                    var new_left;
                    if (left < -35) {
                        new_left = '-60px'
                    } else if (left > 35) {
                        new_left = '60px'
                    } else {
                        new_left = '0px'
                    }
                    // e.currentTarget.style.left = new_left
                    $(e.currentTarget).animate({left: new_left}, 200);
                    enable_scroll()
                });

        $('.collect-container-list-li .behind').on('touchend', function(e) {
            e.preventDefault();
            $(this).parents('li').slideUp('fast', function() {
                $(this).remove()
            })
        })

    });
</script>
</body>
</html>